<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班可视化系统 - 登录/注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css  ">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 在 <style> 标签内添加 */
        .message-overlay {
            position: fixed;
            top: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            z-index: 1000;
            pointer-events: none;
        }

        .message {
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            max-width: 90%;
            pointer-events: auto;
        }

        .message.error {
            background-color: #ffebee;
            color: #b71c1c;
            border-left: 4px solid #f44336;
        }

        .message.success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border-left: 4px solid #4caf50;
        }

        .message i {
            margin-right: 10px;
            font-size: 20px;
        }

        .close-btn {
            background: none;
            border: none;
            color: inherit;
            margin-left: 15px;
            cursor: pointer;
            font-size: 16px;
        }

       body {
            background: url('https://cdn.pixabay.com/photo/2019/09/05/15/25/airbus-4454338_1280.jpg') center/cover fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .container {
            width: 480px;
            max-width: 90%;
            min-height: 520px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            position: relative;
            z-index: 10;
        }

        .forms-container {
            flex: 1;
            padding: 40px 30px;
            position: relative;
            overflow: hidden;
            max-height: 500px;
            overflow-y: auto;
        }

        .form-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .form-header h2 {
            font-size: 2rem;
            color: #1a2980;
            margin-bottom: 10px;
        }

        .form-header p {
            color: #666;
        }

        .form-toggle {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
        }

        .toggle-btn {
            padding: 10px 25px;
            background: #f0f4f8;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .toggle-btn:first-child {
            border-radius: 30px 0 0 30px;
        }

        .toggle-btn:last-child {
            border-radius: 0 30px 30px 0;
        }

        .toggle-btn.active {
            background: #1a2980;
            color: white;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #444;
        }

        .input-with-icon {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 14px 45px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            appearance: none;
        }

        .form-group select {
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #1a2980;
            box-shadow: 0 0 0 3px rgba(26, 41, 128, 0.1);
        }

        .form-group .error-message {
            color: #e74c3c;
            font-size: 0.85rem;
            margin-top: 5px;
            display: none;
        }

        .form-group.error input,
        .form-group.error select {
            border-color: #e74c3c;
        }

        .form-group.error .error-message {
            display: block;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }

        .submit-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(to right, #1a2980, #26d0ce);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .submit-btn:hover {
            background: linear-gradient(to right, #152063, #20b2aa);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 41, 128, 0.3);
        }

        .form-footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }

        .form-footer a {
            color: #1a2980;
            text-decoration: none;
            font-weight: 500;
        }

        .form-footer a:hover {
            text-decoration: underline;
        }

        .form-section {
            display: none;
        }

        .form-section.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    {% if error %}
        <div class="message-overlay">
            <div class="message error">
                <i class="fas fa-exclamation-circle"></i> {{ error }}
                <button class="close-btn"><i class="fas fa-times"></i></button>
            </div>
        </div>
    {% endif %}

    {% if message %}
        <div class="message-overlay">
            <div class="message success">
                <i class="fas fa-check-circle"></i> {{ message }}
                <button class="close-btn"><i class="fas fa-times"></i></button>
            </div>
        </div>
    {% endif %}
<div class="container">
    <div class="forms-container">
        <div class="form-header">
            <h2>欢迎航班数据分析系统</h2>
            <p>请登录您的账户或注册新账户</p>
        </div>

        <div class="form-toggle">
            <button class="toggle-btn active" id="loginToggle">登录</button>
            <button class="toggle-btn" id="registerToggle">注册</button>
        </div>

        <div class="form-section active" id="loginForm">
            <form method="POST" action="{{ url_for('login') }}">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" name="username" placeholder="请输入用户名">
                    </div>
                    <div class="error-message" id="usernameError">用户名不能为空</div>
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" placeholder="请输入密码">
                        <button type="button" class="password-toggle" id="passwordToggle">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div class="error-message" id="passwordError">密码不能少于6位</div>
                </div>

                <div class="form-group">
                    <label for="role">角色</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <select id="role" name="role">
                            <option value="users">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                </div>

                <button type="submit" class="submit-btn">登录系统</button>
            </form>

                <!-- 修改忘记密码部分 -->
                <div class="form-footer">
                    <a href="#" id="forgotPassword">忘记密码？</a>
                </div>
                <!-- 添加忘记密码表单 -->
                <form id="forgotPasswordForm" method="POST" action="{{ url_for('forgot_password') }}" style="display: none;">
                    <input type="email" name="email" id="forgotEmail" required>
                </form>
        </div>

        <div class="form-section" id="registerForm">
            <form method="POST" action="{{ url_for('register') }}">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <input type="text" id="registerUsername" name="registerUsername" placeholder="请输入用户名">
                    </div>
                    <div class="error-message" id="registerUsernameError">用户名不能为空</div>
                </div>

                <div class="form-group">
                    <label for="registerEmail">电子邮箱</label>
                    <div class="input-with-icon">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="registerEmail" name="registerEmail" placeholder="请输入电子邮箱">
                    </div>
                    <div class="error-message" id="registerEmailError">请输入有效的电子邮箱</div>
                </div>

                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="registerPassword" name="registerPassword" placeholder="请输入密码（至少6位）">
                        <button type="button" class="password-toggle" id="registerPasswordToggle">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    <div class="error-message" id="registerPasswordError">密码不能少于6位</div>
                </div>

                <div class="form-group">
                    <label for="registerConfirmPassword">确认密码</label>
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="registerConfirmPassword" name="registerConfirmPassword" placeholder="请再次输入密码">
                    </div>
                    <div class="error-message" id="registerConfirmPasswordError">两次输入的密码不一致</div>
                </div>

                <div class="form-group">
                    <label for="registerRole">角色</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <select id="registerRole" name="role">
                            <option value="users">普通用户</option>
                        </select>
                    </div>
                </div>

                <button type="submit" class="submit-btn">注册账户</button>
            </form>

            <div class="form-footer">
                已有账户？ <a href="#" id="toLoginLink">立即登录</a>
            </div>
        </div>
    </div>
</div>

<script>
    // 添加消息关闭功能
    document.querySelectorAll('.close-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            btn.closest('.message-overlay').remove();
        });
    });
    const loginToggle = document.getElementById('loginToggle');
    const registerToggle = document.getElementById('registerToggle');
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');
    const toLoginLink = document.getElementById('toLoginLink');

    function toggleForm(isLogin) {
        if (isLogin) {
            loginToggle.classList.add('active');
            registerToggle.classList.remove('active');
            loginForm.classList.add('active');
            registerForm.classList.remove('active');
        } else {
            registerToggle.classList.add('active');
            loginToggle.classList.remove('active');
            registerForm.classList.add('active');
            loginForm.classList.remove('active');
        }
    }

    loginToggle.addEventListener('click', () => toggleForm(true));
    registerToggle.addEventListener('click', () => toggleForm(false));
    toLoginLink.addEventListener('click', (e) => {
        e.preventDefault();
        toggleForm(true);
    });

    function setupPasswordToggle(inputId, toggleId) {
        const passwordInput = document.getElementById(inputId);
        const toggleButton = document.getElementById(toggleId);

        toggleButton.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            toggleButton.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
        });
    }

    setupPasswordToggle('password', 'passwordToggle');
    setupPasswordToggle('registerPassword', 'registerPasswordToggle');

    function validateLoginForm() {
        let isValid = true;
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value.trim();

        document.getElementById('usernameError').style.display = 'none';
        document.getElementById('username').parentElement.parentElement.classList.remove('error');
        document.getElementById('passwordError').style.display = 'none';
        document.getElementById('password').parentElement.parentElement.classList.remove('error');

        if (!username) {
            document.getElementById('usernameError').style.display = 'block';
            document.getElementById('username').parentElement.parentElement.classList.add('error');
            isValid = false;
        }

        if (password.length < 6) {
            document.getElementById('passwordError').style.display = 'block';
            document.getElementById('password').parentElement.parentElement.classList.add('error');
            isValid = false;
        }

        return isValid;
    }

    function validateRegisterForm() {
        let isValid = true;
        const username = document.getElementById('registerUsername').value.trim();
        const email = document.getElementById('registerEmail').value.trim();
        const password = document.getElementById('registerPassword').value.trim();
        const confirmPassword = document.getElementById('registerConfirmPassword').value.trim();

        document.querySelectorAll('#registerForm .error').forEach(el => {
            el.classList.remove('error');
        });
        document.querySelectorAll('#registerForm .error-message').forEach(el => {
            el.style.display = 'none';
        });

        if (!username) {
            document.getElementById('registerUsernameError').style.display = 'block';
            document.getElementById('registerUsername').parentElement.parentElement.classList.add('error');
            isValid = false;
        }

        if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            document.getElementById('registerEmailError').style.display = 'block';
            document.getElementById('registerEmail').parentElement.parentElement.classList.add('error');
            isValid = false;
        }

        if (password.length < 6) {
            document.getElementById('registerPasswordError').style.display = 'block';
            document.getElementById('registerPassword').parentElement.parentElement.classList.add('error');
            isValid = false;
        }

        if (password !== confirmPassword) {
            document.getElementById('registerConfirmPasswordError').style.display = 'block';
            document.getElementById('registerConfirmPassword').parentElement.parentElement.classList.add('error');
            isValid = false;
        }

        return isValid;
    }

    document.querySelector('#loginForm form').addEventListener('submit', function(e) {
        if (!validateLoginForm()) {
            e.preventDefault();
        } else {
            const submitBtn = this.querySelector('.submit-btn');
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
            submitBtn.disabled = true;
            // 表单会正常提交，不需要手动跳转
        }
    });

    // 修改忘记密码事件处理
    document.getElementById('forgotPassword').addEventListener('click', (e) => {
        e.preventDefault();
        const email = prompt('请输入您的注册邮箱，我们将发送密码重置链接：');
        if (email) {
            // 设置隐藏表单的邮箱值并提交
            document.getElementById('forgotEmail').value = email;
            document.getElementById('forgotPasswordForm').submit();
        }
    });

    document.querySelector('#registerForm form').addEventListener('submit', function(e) {
        if (!validateRegisterForm()) {
            e.preventDefault();
        } else {
            const submitBtn = this.querySelector('.submit-btn');
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
            submitBtn.disabled = true;
            // 表单会正常提交，不需要手动跳转
        }
    });
</script>
</body>
</html>